import { useEffect, useState } from 'react'
import './App.css'

function App() {
  const [posts, setPosts] = useState([])
  // useEffect 让 jsx 首屏显示不受数据请求的阻塞
  useEffect(() => {
    // fetch('http://localhost:1234/posts') // pending
    //   .then((data) => { // fulfilled
    //     data.json();
    //   })
    //   .then((data) => {
    //     setPosts(data)
    //   })
    (async function () {
      const result = await fetch('http://localhost:1234/posts')
      const data = await result.json()
      console.log(data)
      setPosts(data)
    })()
  }, [])
  return (
    <div className="App">
      {!posts.length && <div>当前列表为空</div>}
      {posts.length && posts.map(post => <li key={post.id}>{post.title}</li>)}
    </div>
  )
}

export default App
